import React, { useEffect, useState } from 'react'
import TabBars from '../../components/TabBars'
import {getdeticketlist}from '../../request/api'
import { Calendar } from 'antd-mobile'
 
function Ticketing() {
  const defaultSingle = new Date("2022-03-04");
  const [data,setData] = useState<any>()
  useEffect(() => {
    getdeticketlist().then(res => {
      console.log(res);
      setData(res.data.data)
    })
  },[])
  return (
    <div>
      <Calendar
        style={{ height: "22vh", overflow: "hidden" }}
        selectionMode="single"
        defaultValue={defaultSingle}
        onChange={(val) => {
          console.log(val);
        }}
      />
      <div style={{padding:'0 10px'}}>
        {
          data && data.map((item:any,index:any) => {
            return(
              <div style={{borderRadius:'10px', width:'100%',height:'100px',background:'#ccc',marginTop:'10px'}}>
                <div>
                  {item.showName}
                </div>
                <div>
                  <span>{item.showTime}</span>
                  <span>{item.seatNo}</span>
                  <span>{item.ticketType}</span>
                </div>
              </div>
            )
          })
        }
      </div>
      <TabBars pathname='ticketing'></TabBars>
    </div>
  )
}

export default Ticketing
